.container-fluid {
  min-height: 784px;
  margin-bottom: 40px;
}

.remote-container {
  width: 1160px!important;
}
.remote-container:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@media screen and (min-width: 1900px) {
  .remote-container {
    width: 1600px !important;
  }
}

.remote-player[rotate=horizontal] > canvas {
  min-height:312px;
  max-height:312px;
}

.remote-player[rotate=vertical] > canvas {
  min-height:519px;
  max-height:519px;
}

@media screen and (min-width: 1900px) {
  .remote-player[rotate=horizontal] > canvas {
    min-height: 405.6px;
    max-height: 405.6px;
  }

  .remote-player[rotate=vertical] > canvas {
    min-height: 674.7px;
    max-height: 674.7px;
  }
}

.remote-view {
  min-height:494px;
  max-height: 494px;
}

@media screen and (min-width: 1900px) {
  .remote-view {
    min-height: 649.7px;
    max-height: 649.7px;
  }
}

.remote-info {
  width: 68.6%;
}

@media screen and (min-width: 1900px) {
  .remote-info {
    width: 72.3%;
  }
  .remote-info[rotate=horizontal] {
    margin-left: 221.6px!important;
  }
}

.remote-container {
  margin: 0px auto;
  margin-bottom: 20px;
}

.remote-left {
  float: left;
}

.remote-right {
  float: right;
}

.remote-left, .remote-right {
  margin-bottom: 20px;
}

.remote-device {
  display: table;
  box-shadow: 0px 0px 15px #888888;
  border-radius: 10px;
  padding: 5px;
  float: left;
  width: 320px;
  height: 569px;
}

.remote-device[rotate=horizontal] {
  margin-left: 306.5px;
  width: 529px;
  height: 374px;
}

.remote-device[rotate=vertical] {
  width: 312px;
  height: 581px;
}

@media screen and (min-width: 1900px) {
  .remote-device[rotate=horizontal] {
    margin-left: 447px !important;
  }
}

.remote-player {
  display: table-row;
  width: 100%;
  height: calc(100% - 40px);
}


.remote-player > canvas {
  border: #ccc solid 1px;
  border-radius: 5px;
  background: #333;
}

.remote-bottom {
  display: table-row;
}

.remote-video {
  background: #333;
  width: 100%;
  height: calc(100% - 48px);
}

.remote-btns{
  display: table;
  table-layout: fixed;
  vertical-align: middle;
  margin-top: 0;
  width: 100%;
}

.remote-btns > a{
  display: table-cell;
  position: relative;
  cursor: pointer;
  float: none;
  width: 1%;
  margin: 0;
  border-radius: 0;
  padding:6px 12px;
  background-color:#fff;
  color:#333;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.remote-btns > a:hover{
  background-color:#fff;
  color:#FF7F24;
}

.remote-btns > a:focus{
  color:#333;
}

.remote-info {
  margin: 10px 0 0 40px;
  float: left;
  height: 100%;
}

.remote-info[rotate=horizontal] {
  margin-left: 182px;
}

.remote-view {
  border: #dddddd 1px solid;
  border-radius: 5px;
  margin-top: 30px;
  width: 100%;
  height: calc(100% - 42px);
}

.nav-tabs > .remote-close {
  float: right;
}

.remote-close > button, .remote-close > button:focus {
  color: lightcoral;
  padding: 8px 0 0 0;
  background-color: transparent;
}

.remote-close > button:hover {
  color: red;
}

.nav>li>.remote-btn:focus, .nav>li>.remote-btn:hover{
  color: #16a085;
  text-decoration: none;
  background-color: #fff ;
  border-color: #fff #fff #ddd #fff;
}

.nav>li>.remote-btn {
  height:47px;
  min-width:84px;
}
